<template>
  <a-modal
      :title="title"
      :width="800"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
      class="operationModal"
  >

    <a-spin :spinning="confirmLoading">
      <a-form
          :form="form"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
      >
        <a-form-item label="车牌号">
          <a-input
              placeholder="请输入车牌号"
              v-decorator="['plateNo', { rules: [{ type: 'string', required: true, message: '请输入车牌号!' }] }]"
          />
        </a-form-item>
        <a-form-item label="有效期">
          <a-radio-group
              v-model="isForever"
              @change="isForeverChange"
          >
            <a-radio :value="1">永久期限</a-radio>
            <a-radio :value="0">自定义时间</a-radio>
          </a-radio-group>
        </a-form-item>
        <div v-show="!isForever">
          <a-form-item
              label="指定日期"
              class="dateBox"
          >
            <a-checkbox @change="isDateChecked = !isDateChecked" :checked="isDateChecked"></a-checkbox>
            <a-button
                :disabled="!isDateChecked"
                v-for="(item,index) in fastDate"
                :key="item"
                @click="fastDateClick(index)"
            >{{ item }}</a-button>
          </a-form-item>
          <a-row>
            <a-col
                :xs="{ offset: 24 }"
                :sm="{ offset: 5 }"
            >
              <a-row>
                <a-col :span="12">
                  <a-form-item label="开始日期">
                    <a-date-picker
                        format="YYYY-MM-DD"
                        :disabled="!isDateChecked"
                        v-model="startDate"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="结束日期">
                    <a-date-picker
                        format="YYYY-MM-DD"
                        :disabled="!isDateChecked"
                        v-model="endDate"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-form-item label="指定时间">
            <a-checkbox @change="isTimeChecked = !isTimeChecked" :checked="isTimeChecked"></a-checkbox>
          </a-form-item>
          <a-row>
            <a-col
                :xs="{ offset: 24 }"
                :sm="{ offset: 5 }"
            >
              <a-row>
                <a-col :span="12">
                  <a-form-item label="开始时间">
                    <a-time-picker
                        v-decorator="['startTime', {}]"
                        :disabled="!isTimeChecked"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="结束时间">
                    <a-time-picker
                        v-decorator="['endTime', { }]"
                        :disabled="!isTimeChecked"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-form-item label="指定周日">
            <a-checkbox @change="isWeekdayChecked = !isWeekdayChecked" :checked="isWeekdayChecked"></a-checkbox>
          </a-form-item>
          <a-row>
            <a-col
                :xs="{ offset: 24 }"
                :sm="{ offset: 5 }"
            >
              <a-form-item>
                <a-checkbox-group
                    :options="['周一','周二','周三','周四','周五','周六','周日',]"
                    :disabled="!isWeekdayChecked"
                    v-decorator="['weekDay',{}]"
                >
                </a-checkbox-group>
              </a-form-item>
            </a-col>
          </a-row>

        </div>

        <a-form-item label="车主姓名">
          <a-input
              placeholder="请输入车主姓名"
              v-decorator="[
              'userName',
              {
                rules: [
                  { type: 'string' },
                  { max: 40, message: '车主姓名长度不要超过40个字符' },
                ],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="车主手机号码">
          <a-input
              placeholder="请输入车主手机号码"
              v-decorator="[
              'mobile',
              { rules: [ { validator: this.validateMobile }] },
            ]"
          />
        </a-form-item>

        <a-form-item label="家庭住址">
          <a-input
              placeholder="请输入家庭住址"
              v-decorator="['address', { rules: [{ max: 100, message: '家庭住址长度不要超过100个字符' }] }]"
          />
        </a-form-item>

        <a-form-item label="车辆备注">
          <a-input
              placeholder="请输入车辆备注"
              v-decorator="['remark', { rules: [{ max: 100, message: '车辆备注长度不要超过100个字符' }] }]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {getAction, httpAction} from '@api/manage'
import pick from 'lodash.pick'
import moment from "moment"
export default {
  name: "ParkBlackListModal",
  data () {
    return {
      isForever: 0,
      title:"操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      initialWeekday:[],//星期名称默认选择的值
      carTypes:[],
      parkCode: [],
      parkName: [],
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules:{
      },
      url: {
        add: "/blacklist/parkBlackList/add",
        edit: "/blacklist/parkBlackList/edit",
        queryParkList: "/blacklist/parkBlackList/queryParkList",
        parkCarTypeList:"/ConfigCarType/configCarType/parkCarTypeList"
      },
      isDateChecked: false, //标记是否勾选了指定日期
      isTimeChecked: false, //标记是否勾选了指定时间
      isWeekdayChecked: false, //标记是否勾选了指定周日
      startDate: '', //开始日期
      endDate: '', //结束日期
      fastDate: ['一个月', '三个月', '六个月', '一年', '三年'],
    }
  },
  methods: {
    moment,
    isForeverChange(e) {
      this.isForever = e.target.value
    },
    add() {
      this.edit({ isForever: 1 ,"licenseType": 2,"status": "Y",})
    },
    edit(record) {
      console.log(record)
      this.isForever = record.isForever;
      this.isDateChecked=false,
          this.isTimeChecked=false,
          this.isWeekdayChecked=false
      this.startDate = '';
      this.endDate = '';
      this.visible = true
      this.confirmLoading = true
      this.form.resetFields()

      this.model = Object.assign({}, record)
      if(!record.isForever){
        if(record.startDate){
          this.isDateChecked = true;
          this.startDate = moment(record.startDate);
          this.endDate = moment(record.endDate);
        }
        if(record.startTime){
          this.isTimeChecked = true;
          this.model.startTime = moment(this.model.startTime,'HH:mm:ss')
          this.model.endTime = moment(this.model.endTime,'HH:mm:ss')
        }
        console.log(this.model.startTime)
        if(record.weekDay&&record.weekDay.length){
          this.isWeekdayChecked = true;
        }
      }
      if(typeof this.model.weekDay==='string'){
        this.model.weekDay = this.model.weekDay.split('、')
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(
            pick(
                this.model,
                'plateNo',
                'userName',
                'mobile',
                'address',
                'remark',
                'weekDay',
                'startTime',
                'endTime'
            )
        )
        this.confirmLoading = false
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values)
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData =  Object.assign({},this.model, values);
          if (this.isForever === 1) {
            delete formData.weekDay
            delete formData.startDate
            delete formData.endDate
            delete formData.startTime
            delete formData.endTime
            formData.isForever = 1;
          }else{
            formData.isForever=0;
            let result = false;
            if(this.startDate&&this.endDate){
              result = true;
              formData.startDate = this.startDate.format('YYYY-MM-DD');
              formData.endDate = this.endDate.format('YYYY-MM-DD');
            }
            if(formData.startTime&&formData.endTime){
              result = true;
              formData.startTime = formData.startTime.format('HH:mm:ss');
              console.log(formData.startTime)
              formData.endTime = formData.endTime.format('HH:mm:ss');
            }
            if(values.weekDay&&values.weekDay.length){
              result = true;
              formData.weekDay = values.weekDay.join('、');
            }
            if(!result){
              this.$message.warning('请设置自定义时间');
              return;
            }
          }
          formData.updateTime = moment().format('YYYY-MM-DD HH:mm:ss')
          this.confirmLoading = true
          httpAction(httpurl, formData, method)
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  that.close()
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
        callback()
      } else {
        callback('手机号码格式不正确!')
      }
    },
    fastDateClick(index) {
      console.log(index)
      let now = this.moment()
      let endDate = this.moment();
      switch (index) {
        case 0:
          endDate.add(1, 'months')
          break
        case 1:
          endDate.add(3, 'months')
          break
        case 2:
          endDate.add(6, 'months')
          break
        case 3:
          endDate.add(1, 'years')
          break
        case 4:
          endDate.add(3, 'years')
          break
      }

      this.startDate = now
      this.endDate = endDate;
    },
  },
}
</script>

<style lang="less" scoped>
.dateBox .ant-btn {
  margin-left: 20px;
}
</style>
